<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
	/>
	<meta name="theme-color" content="#000000" />
	<meta name="description" content="" />
	<title>申请人领取-学生校园通行码领取</title>
</head>
<style>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei';
		color: #474747;
	}

	.content-wrapper header {
		width: 100%;
		height: 50px;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #379ae7;
		font-size: 12px;
		color: #fff;
	}

	.content-wrapper header>div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.arrow-left {
		margin-right: 10px;
		width: 20px;
	}

	.action-bar {
		padding: 5px 10px;
		text-align: right;
		background-color: #f5f5f5;
		box-shadow: -4px 2px 2px #ddd;
	}

	.action-bar img {
		height: 30px;
	}

	.head-bar {
		margin-top: 20px;
		text-align: center;
	}

	.head-bar img {
		width: 85%;
	}

	.modal-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -10;
		opacity: 0;
		transition: opacity 0.1s linear;
	}

	.modal-wrapper.active {
		z-index: 10;
		opacity: 1;
	}

	.modal-wrapper .modal-fade {
		position: absolute;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 330px;
		height: 330px;
		padding: 20px;
		transform: translate(-50%, -50%);
		background-color: #fff;
	}

	.modal-content img {
		width: 100%;
		height: 100%;
	}
</style>

<body>
	<div class="content-wrapper">
		<header>
			<div>
				<img class="arrow-left" src="https://s1.ax1x.com/2020/08/13/axL1h9.png" />
          <span style="color: #fff">学生校园通行码领取：申请人领取</span>
        </div>
        <small style="opacity: 0.8;color: #fff">流水号：54188233</small>
      </header>
      <div class="action-bar">
        <img src="https://s1.ax1x.com/2020/08/13/axLltJ.png" />
      </div>
      <div className="code-content-wrapper">
        <div class="head-bar">
          <img src="https://s1.ax1x.com/2020/08/13/axLG11.png" />
        </div>
        <div style="font-size: 12px; text-align: center;">
          Everyone is responsible for epidemic prevention on campus
        </div>
        <div
          style="
            display: flex;
            align-items: flex-end;
            justify-content: center;
            margin-top: 20px;
            text-align: center;
          "
        >
          <h3 style="margin-right: 10px;" id="name"></h3>
          <h3 style="margin-right: 10px; font-weight: normal; color: #64726a;">
            校园通行码
          </h3>
          <span style="font-weight: normal; color: #64726a;"
            >Campus Pass Code</span
          >
        </div>
        <h3 style="margin-top: 10px; text-align: center;">
          计算机科学与技术学院、软件学院
        </h3>
        <h3 style="margin-top: 10px; text-align: center;">
          330726199509151515
        </h3>
        <div style="text-align: center;margin-top: 20px">
          <p style="font-size: 14px;color: #cdcdcd;margin-bottom: 5px;">生成时间 Genneration time:</p>
          <small id="createTime"></small>
          <p style="font-size: 14px;color: #cdcdcd;margin: 5px 0;">到期时间 Expire time:</p>
          <small id="expireTime"></small>
        </div>
        <div style="text-align: center;margin-top: 20px;">
          <img src="./code.jpg" style="width: 150px;" onclick="qrCodeClick(1)">
        </div>
        <div style="padding: 0 10px;">
          <p>&nbsp;&nbsp;凭此码可在学校朝晖校区、屏峰校区、莫干山校区范围内配合有效证件通行，请主动出示，配合检查。</p>
          <p>&nbsp;&nbsp;This code can be used to pass with vaild documents in the Zhaohui campus , Pingfeng campus and Moganshan campus Please present it actively and cooperate with the inspection</p>
        </div>
      </div>
      <div class="modal-wrapper" id="modalWrapper">
        <div class="modal-fade" onclick="qrCodeClick(0)"></div>
        <div class="modal-content">
          <img src="./code.jpg"/>
        </div>
      </div>
    </div>
    <script>
      var createTime = document.getElementById('createTime');
      var expireTime = document.getElementById('expireTime');
      var nameText = document.getElementById('name');
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var nameArray = ["卢本伟","刘谋","韩王浩","陈希灿","张云寒","朱希炎", "毛小彤", "金山惠"];
      if (month < 10) {
        month = `0${month}`;
      }
      createTime.innerText = `${year}-${month}-${day} 00:00:00`;
      expireTime.innerText = `${year}-${month}-${day} 23:59:59`;

      function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
            }
            return(false);
      }

      function qrCodeClick(show) {
        var modalWrapper = document.getElementById('modalWrapper');
        if (show) {
          modalWrapper.setAttribute('class', 'modal-wrapper active');
        } else {
          modalWrapper.setAttribute('class', 'modal-wrapper');
        }
      }

      var randomIndex = parseInt(Math.random() * 7);
      var name = getQueryVariable('name') ? decodeURI(getQueryVariable('name')) : nameArray[randomIndex]

      nameText.innerText = name;
    </script>
  </body>
</html>